<template>
  <uni-nav-bar title="补液记录" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package direction-start">
    <view class="datas space-between">
      <uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
        @change="change" />
      <uni-icons type="bars" size="30" color="#666" @click="screenPopupOpen()"></uni-icons>
    </view>
    <view class="center del">
      <view v-for="item in textList" :key='item.value' @click="del(item.value)"
        :style="{display:!item.name?'none':'block'}">
        <text>{{item.name}}</text>
        <uni-icons type="closeempty" size="18" color="#999"></uni-icons>
      </view>
    </view>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <OrderList :getUreaLog="orderLists"></OrderList>
    <view class="fillings" :style="{ height: pageHeight + 'px' }" v-if="orderLists.length<1">
      <image :src="Empty2"></image>
      <text>暂无订单</text>
    </view>
  </scroll-view>
  <!-- 筛选弹框 -->
  <uni-popup ref="popup" type="bottom" background-color="#fff">
    <view style="padding:20rpx;box-sizing: border-box;">
      <view style="height:400rpx;overflow: auto;">
        <view>
          <view>补液员</view>
          <view class="center list">
            <text v-for="item in TeamInfo.getDriverList" :key="item.id" @click="choose('1',item)"
              :style="{background:fill1.name==item.name?'#1B91FF':'#eee',color:fill1.name==item.name?'#fff':'#333'}">{{item.name}}</text>
          </view>
        </view>
        <view style="margin-top:20rpx">
          <view>受液机</view>
          <view class="center list"><text v-for="item in TeamInfo.getFillList" :key="item.id" @click="choose('2',item)"
              :style="{background:fill2.name==item.name?'#1B91FF':'#eee',color:fill2.name==item.name?'#fff':'#333'}">{{item.name}}</text>
          </view>
        </view>
        <view style="margin-top:20rpx">
          <view>补液机</view>
          <view class="center list"><text v-for="item in TeamInfo.getChuFillList" :key="item.id"
              @click="choose('3',item)"
              :style="{background:fill3.name==item.name?'#1B91FF':'#eee',color:fill3.name==item.name?'#fff':'#333'}">{{item.name}}</text>
          </view>
        </view>
      </view>
      <view class="space-between">
        <text class="sure" @click="choose('4')">重置</text>
        <text class="sure" style="background-color:#1B91FF;color:#fff;" @click="choose('5')">确认</text>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { ref, onMounted } from 'vue';
  import OrderList from '@c/rehydrator/orderList.vue';
  import { format, subDays } from 'date-fns';
  import { Empty2 } from '@/utils/Static';
  import { getDeliveryUreaLog } from '@/gql/administrator';
  import { toPublish } from '@mqtt';
  import { information } from '@/stores/administrator';
  const TeamInfo = information();
  /**
   * 加注机详情页面
   * @param {Number} pageHeight 列表高度
   * @param {Number} lastPage 总页数
   * @param {Number} currentPage 当前页数
   * @param {Array} orderLists 加注订单列表
   * @param {Null} popup 筛选弹框
   * @param {Object} fill1 筛选补液员
   * @param {Object} fill2 筛选受液机
   * @param {Object} fill3 筛选补液机
   * @param {Array} textList 选中的筛选数据
   */
  // data
  const now = new Date();
  let end = format(now, 'yyyy-MM-dd');
  const daysAgo = subDays(now, 6);
  let start = format(daysAgo, 'yyyy-MM-dd');
  const range = ref([start, end]);

  const popup = ref(null)

  const pageHeight = ref()
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const orderLists = ref([]);

  const fill1 = ref({})
  const fill2 = ref({})
  const fill3 = ref({})
  const textList = ref([{ name: '', id: 0, value: 'filler' }, { name: '', id: 0, value: 'getFill' }, { name: '', id: 0, value: 'getChu' }])
  onMounted(() => {
    uni.getSystemInfo({
      success: function (res) {
        pageHeight.value = res.windowHeight - 130
      },
    });
    TeamInfo.filler()
    TeamInfo.Receiver()
    TeamInfo.machine()
    init()
  });
  /**
   * 补液记录列表
   * @param {Number} page 当前页
   * @param {Number} driver_id 选中补液员ID
   * @param {Number} from_fill_id 补液机ID
   * @param {Number} to_fill_id 选中受液机ID
   * @param {String} start 开始时间
   * @param {String} end 结束时间
   * @param {String} delivery_id 店铺ID
   */
  function init() {
    isLoading.value = true;
    const driver_id = textList.value.find((item) => item.value === 'filler').id
    const from_fill_id = textList.value.find((item) => item.value === 'getChu').id
    const to_fill_id = textList.value.find((item) => item.value === 'getFill').id
    const payload = {
      query: getDeliveryUreaLog,
      variables: {
        page: currentPage.value,
        start,
        end,
        delivery_id: TeamInfo.station.id,
        driver_id,
        from_fill_id,
        to_fill_id
      },
    };
    toPublish(
      'ql/control/getDeliveryUreaLog',
      payload,
      (obj : any) => {
        const { getDeliveryUreaLog } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getDeliveryUreaLog.list];
        lastPage.value = getDeliveryUreaLog.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  /**
   * 切换日期
   * @param {String} sta 开始时间
   * @param {String} en 结束时间
   */
  function change([sta, en] : any) {
    currentPage.value = 1;
    orderLists.value = [];
    start = sta;
    end = en;
    init();
  }
  // 打开关闭筛选弹框
  function screenPopupOpen() {
    popup.value.open()
  }
  function screenPopupClose() {
    popup.value.close()
  }
  /**
   * 选择筛选的信息
   * @param {String} type 筛选的信息
   * @param {Object} num 选中的信息
   */
  function choose(type : string, num : any) {
    switch (type) {
      case '1':
        fill1.value = num
        break;
      case '2':
        fill2.value = num
        break;
      case '3':
        fill3.value = num
        break;
      case '4':
        resetting()
        break;
      case '5':
        textList.value.map((item) => {
          switch (item.value) {
            case 'filler':
              if (fill1.value) {
                item.name = fill1.value.name
                item.id = fill1.value.id ? Number(fill1.value.id) : 0
              }
              break;
            case 'getFill':
              if (fill2.value) {
                item.name = fill2.value.name
                item.id = fill2.value.id ? Number(fill2.value.id) : 0
              }
              break;
            case 'getChu':
              if (fill3.value) {
                item.name = fill3.value.name
                item.id = fill3.value.id ? Number(fill3.value.id) : 0
              }
              break;
          }
        })
        currentPage.value = 1;
        orderLists.value = [];
        screenPopupClose()
        init();
        resetting()
        break;
    }
  }
  /**
   * 初始化信息
   */
  function resetting() {
    fill1.value = {}
    fill2.value = {}
    fill3.value = {}
  }
  /**
   * 删除筛选的信息
   * @param {Object} value 选中的信息
   */
  function del(value : string) {
    textList.value.map((item) => {
      if (item.value == value) {
        item.name = ''
        item.id = 0
      }
    })
    currentPage.value = 1;
    orderLists.value = [];
    init();
  }
</script>

<style scoped lang="less">
  .sure {
    margin-top: 40rpx;
    width: 341rpx;
    height: 78rpx;
    border: 2rpx solid #1B91FF;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center;
    line-height: 78rpx;
    color: #1B91FF;
  }

  .list {
    flex-wrap: wrap;

    text {
      width: 165rpx;
      text-align: center;
      height: 50rpx;
      line-height: 50rpx;
      background-color: #eee;
      border-radius: 5px;
      margin-top: 15rpx;
      margin-right: 15rpx;
      font-size: 24rpx;
    }

    text:nth-child(4n) {
      margin-right: 0px;
    }
  }

  .del {
    view {
      padding: 2rpx 20rpx;
      box-sizing: border-box;
      border-radius: 30rpx;
      background-color: #eee;
      margin-right: 20rpx;
    }
  }

  .fillings {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    image {
      width: 352rpx;
      height: 352rpx;
      margin-top: -140rpx;
    }

    text {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-top: 20rpx;
    }
  }
</style>
<style>
  .datas>>>.uni-date__x-input {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-date-x {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-icons {
    font-size: 48rpx !important;
  }
</style>